<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-button size="mini"  type="primary" class="handle-del mr10" @click="add">新增</el-button>
                <el-input size="mini"  v-model="keyword" placeholder="筛选名称" class="handle-input mr10"></el-input>
                <el-button size="mini"  type="primary" icon="search" @click="query">筛选</el-button>
            </div>
            <el-table style="width:100%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                <el-table-column type="index" label="序号" align="center" width="50"/>
                    <el-table-column prop="fdName" label="参数名称"  width="150"/>
                    <el-table-column prop="fdIsSystem" label="系统参数" sortable width="150">
                      <template slot-scope="scope">
                          <el-switch v-model="scope.row.fdIsSystem" :disabled="true"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="fdValue" label="参数值"  width="150"/>
                    <el-table-column prop="fdRemark" label="备注"  />
                    <el-table-column prop="fdCreateTime" label="创建时间" :formatter="dateFormat" sortable width="150"/>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
            </div>
        </div>
    </div>
</template>

<script>
    import dateUtil from '@/utils/dateUtils';
    export default {
        name: 'sysConfigMainList',
        data() {
            return {
                tableData:{
                    keyword: '',
                    size:0,
                    total:0,
                    current:1,
                    records: []
                },
                keyword: ''
            }
        },
        created() {
            this.getData();
        },
        methods: {
            add() {
                const params = {
                    path: "/sys/config/sys_config_main/edit"
                }
                this.$common.openTag(params);
            },
            getData() {
                this.$post('/api/sys/config/sys_config_main/list',{
                    keyword: this.tableData.keyword,
                    current: this.tableData.current
                }).then((res) => {
                    this.tableData = res.data;
                });
            },
            query(){
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            dateFormat(obj,column){
                return dateUtil.format(obj.fdCreateTime);
            },
            handleEdit(row){
                let id = row.fdId;
                const params = {
                    path: "/sys/config/sys_config_main/edit",
                    query: {id:id}
                }
                this.$common.openTag(params);
            },
            handleDelete(index,row){
                this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                    this.$delete('/api/sys/config/sys_config_main',{
                        id:row.fdId
                    }).then((res) => {
                        this.tableData.records.splice(index,1)
                        this.$message({type:'success',message:'删除成功!'})
                    });
                })
            },
            handleCurrentChange(value){
                this.tableData.current = value;
                this.tableData.keyword = this.keyword;
                this.getData();
            }
        }
    }
</script>

<style scoped>
 @import "~@/assets/css/list.css";
</style>
